<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('Magic_Coffee咖啡店-首页','index')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<content id="content">
    <nav th:replace="mall/header::header-search-fragment"></nav>
    <div class="w">
        <ul class="keyword-list">
            <li class="keyword-item">
                <a href="./list.html?keyword=美式" class="link" target="_blank">美式咖啡</a>
                <a href="./list.html?keyword=冷萃" class="link" target="_blank">冷萃咖啡</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=拿铁" class="link" target="_blank">拿铁</a>
                <a href="./list.html?keyword=陨石" class="link" target="_blank">陨石系列</a>
                <a href="./list.html?keyword=黑糖拿铁" class="link" target="_blank">黑糖拿铁</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=香草" class="link" target="_blank">清新香草</a>
                <a href="./list.html?keyword=焦糖" class="link" target="_blank">焦糖风味</a>
                <a href="./list.html?keyword=厚乳拿铁" class="link" target="_blank">厚乳拿铁</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=卡布奇诺" class="link" target="_blank">卡布奇诺</a>
                <a href="./list.html?keyword=摩卡" class="link" target="_blank">摩卡</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=葡萄" class="link" target="_blank">满杯葡萄</a>
                <a href="./list.html?keyword=草莓" class="link" target="_blank">满杯草莓</a>
                <a href="./list.html?keyword=百香果" class="link" target="_blank">满杯百香果</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=红茶" class="link" target="_blank">经典红茶</a>
                <a href="./list.html?keyword=绿茶" class="link" target="_blank">鲜茉绿茶</a>
                <a href="./list.html?keyword=乌龙" class="link" target="_blank">冻顶乌龙</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=巧克力" class="link" target="_blank">牛奶巧克力</a>
                <a href="./list.html?keyword=牛奶" class="link" target="_blank">纯牛奶</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=扁桃仁" class="link" target="_blank">草莓扁桃仁</a>
                <a href="./list.html?keyword=腰果仁" class="link" target="_blank">草莓腰果仁</a>
                <a href="./list.html?keyword=榛子仁" class="link" target="_blank">榛子仁</a>
            </li>
            <li class="keyword-item">
                <a href="./list.html?keyword=泡芙" class="link" target="_blank">绵香泡芙</a>
                <a href="./list.html?keyword=曲奇" class="link" target="_blank">曲奇</a>
                <a href="./list.html?keyword=欧包" class="link" target="_blank">蛋黄欧包</a>
            </li>
        </ul>
        <div class="swiper-container fl">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../../mall/image/swiper/banner01.jpg" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="../../mall/image/swiper/banner02.jpg" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="../../mall/image/swiper/banner03.jpg" alt="">
                </div>
                <div class="swiper-slide">
                        <img src="../../mall/image/swiper/banner04.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <div class="w">
        <div id="flash">
            <h2>新品上线</h2>
            <ul>
                <div class="li-line">
                <th:block th:unless="${#lists.isEmpty(newProduct)}">
                    <th:block th:each="newProduct : ${newProduct}">
                    <li>
                        <a th:href="@{'./detail.html?productId='+${newProduct.id}}" target="_blank">
                            <img th:alt="${newProduct.name}" th:src="@{${newProduct.imageHost}+${newProduct.mainImage}}">
                            <p class="name" th:text="${newProduct.name}">Magic Coffee</p>
                            <p class="discount" th:text="${newProduct.subtitle}">Magic Coffee</p>
                            <p class="item_price" th:text="${newProduct.price}+'￥'">Magic Coffee</p>
                        </a>
                    </li>
                    </th:block>
                </th:block>
                </div>
            </ul>
        </div>
    </div>

    <div class="w">
        <div class="floor-wrap">
            <h1 class="floor-title">推荐饮品</h1>
            <ul class="floor-list">
                <li class="floor-item">
                    <a th:href="@{'./list.html?categoryId=100005'}">
                        <span class="floor-text">大师咖啡</span>
                        <img src="../../mall/image/floor/标准美式.jpg" alt="大师咖啡" class="floor-img"><img/>
                    </a>
                </li>
                <li class="floor-item">
                    <a href="./list.html?categoryId=100006">
                        <span class="floor-text">经典拿铁</span>
                        <img src="../../mall/image/floor/拿铁.jpg" alt="经典拿铁" class="floor-img">
                    </a>
                </li>
                <li class="floor-item">
                    <a href="./list.html?categoryId=100007">
                        <span class="floor-text">厚乳拿铁</span>
                        <img src="../../mall/image/floor/冲绳黑糖拿铁.jpg" alt="厚乳拿铁" class="floor-img">
                    </a>
                </li>
                <li class="floor-item">
                    <a href="./list.html?categoryId=100008">
                        <span class="floor-text">环球经典</span>
                        <img src="../../mall/image/floor/环球经典.png" alt="环球经典" class="floor-img">
                    </a>
                </li>
                <li class="floor-item">
                    <a href="./list.html?categoryId=100009">
                        <span class="floor-text">鲜榨果汁</span>
                        <img src="../../mall/image/floor/鲜榨果汁.jpg" alt="鲜榨果汁" class="floor-img">
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div>

    </div>



</content>
<div th:replace="mall/general-footer::general-footer-fragment"></div>
<!-- jQuery -->
<!--<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>-->
<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/mall/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/mall/js/index.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>

</body>
</html>